Today's Question:  What does your personal desk look like?        GIVE A SHOUT

SEARCH KEYWORD -- CSS Transition

  CSS Animation vs. JavaScript: Which One Is Better?

You know that there are two ways of creating animations on the web: with CSS and JavaScript. And, their selection completely depends on the dependencies of the project. But many web developers hold a wrong perception that CSS is the only way of creating the animations. In fact, CSS has established as the most pampered system of the web development industry and most of the developers recommend it because it is mobile-friendly and powerful system. No doubt CSS is good, but JavaScript is the best....

   CSS animation, JS animation     2015-07-24 02:45:01

  Venn Diagram entirely in CSS

The HTML5 Microzone is presented by DZone and Microsoft to bring you the most interesting and relevant content on emerging web standards.  Experience all that the HTML5 Microzone has to offer on our homepage and check out the cutting edge web development tutorials on Script Junkie, Build My Pinned Site, and the HTML5 DevCenter. A friend of mine alerted me this weekend to just how much I have a weird fascination with Venn diagrams. I decided to roll with it. So yeah...

   CSS,Venn Diagram,Implementation     2012-02-06 08:10:41

  HTML5 History of 20th Century Music

We've seen some neat interactive HTML5 infographics before -- but the periodic table, for example, doesn't really care that much about time.Visual representation of time introduces numerous complications. Traditional ways of representing time visually were, roughly speaking, translations of dimension-type, from temporal to spatial; the mapping selected would depend on what kind of temporal relation was meaningful for the particular application. For example, circles represent cyclical beha...

   HTML5,JavaScript,Music,Timeline     2011-12-16 09:35:55

  Use of @font-face

Almost all web browsers(including the dinosaur browser IE6) support the web font property @font-face. Its usage is: @font-face { font-family: 'MyWebFont'; src: url('webfont.eot'); /* IE9 Compat Modes */ src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('webfont.woff') format('woff'), /* Modern Browsers */ url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */ url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } Now we...

   CSS,@font-face     2014-06-08 07:17:34

  Ways to make elements in HTML center aligned horizontally

In our daily HTML design,  it is an easy job to horizontally center align an element with known width. <div class="element">I am<a href="http://www.aiubug.com" target="_blank" rel="external" title=""> bug </a>！</div>  .element{width:960px;margin:0 auto;}  The above codes set the width of the div block and horizontally center align it. It's very easy to implement. However, if we have some elements we don;t know their width and we still want to...

   HTML,CSS,Center align,Unknown width     2012-07-11 12:55:00

  Remove browse button from input type=file

In Web 2.0 era, many websites will ask the user to upload their avatar when creating their profile. In HTML, the input control we should use is input="file". This is a file control provided by the browser vendor and it should be ran in a sandbox for security consideration. Browsers don't provide ways to choose file from local and upload to the remote server without the input="file" control.  There is one annoying part about the input="file", which is a default button named "Choose File" or...

   file,html,browse,remove browse button     2015-07-12 05:17:51

  Siri in Practice

Some quick comments on using Siri in practice—for things other than asking it to open the pod bay doors. Siri’s voice recognition is very impressive, and the scope of what it understands is very good given the difficulty of what it’s doing. But it has a lot of trouble with certain sorts of names—Irish names, for example, which often are not written as pronounced. For example there are a lot of people in Ireland named “Aoife”—it’s a very popul...

   Siri,Apple,Practice,Artificial Intelligence,AI     2011-10-15 15:01:13

  CSS position explained

CSS has two very important properties on determining the position of an element in webpage: display and position. display is used to determine how elements are grouped and displayed on the page. While position is used to determine the exact position of an element on a page. And this post would explain position property in detail. position is used to determine the exact position of an element on a page. It has five possible values. static relative absolute fixed sticky sticky is supported start...

   CSS,STICKY,CSS3     2019-11-22 19:57:52

  6 amazing HTML5 animation effects

HTML5 is rapidly developed in WEB world, it puts all kinds of pressure to browser development, but at the same time it also brings us lots of unexpected page effects. If we can use some HTML5 elements on our web apps,  we may get different user experience. However, for HTML5, there are lots of places need to improved. The following HTML5 animation effects are very attractive. 1. HTML5 mouseover image effect This HTML5 animation effect can be used in photo gallery, users can preview the...

   HTML5,Animation     2012-11-20 10:32:52

  9 useful jQuery code snippets

jQuery is one of the most popular JS library among front end developers because of its functionality and usability. Here we share with you some useful jQuery code snippets which can be used in our daily front end development. 1. Smoothly return to page top $(document).ready(function() { $("a.topLink").click(function() { $("html, body").animate({ scrollTop: $($(this).attr("href")).offset().top + "px" }, { duration: 500, easing: "swing" ...

   jQuery,Code snippet     2013-07-13 00:11:10

RECENT